<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				background: #C7C7C7;
			}
			
			img {
				width: 160px;
				height: 160px;
				position: absolute;
				left: 0px;
				top: 200px;
			}
		</style>
	</head>

	<body>
		<input type="button" id="go" value="跑" />
		<input type="button" id="stop" value="停" />
		<img src="img/a.jpg" id="pic" />
	</body>
	<script type="text/javascript">
		// 在设置变量的时候，如果设置的是对象，通过o开头，
		// 如果是数组，设置的时候，通过a开头
		// 如果设置的是函数，通过fn开头
		var oGo = document.getElementById("go");
		// 获取到跑步的图片
		var oPic = document.getElementById("pic");
		// 停止
		var oStop = document.getElementById("stop");
		// 定义一个num用来记录跑步的值
		var num = 0;
		var run = null;
		oGo.onclick = function() {
			
//			// 在跑步之前，先让小人停下来了
//			clearInterval(run)
//			// 设置小人的定时任务
//			run = setInterval(function() {
//				num += 10;
//				// 每隔一百毫秒就跑一次
//				oPic.style.left = num + 'px'
//			}, 100)
		}
		oStop.onclick = function() {
			// 停止动画
			clearInterval(run)
		}
	</script>

</html>